<template>
	<view class="consult">
		<z-paging ref="paging" v-model="dotList" @query="queryList">
			<view slot="top">
				<view class="head">
					<image class="bg" :src="$buildFullImageUrl('/static/consult/head-bg.png')"></image>
					<view class="con">
						<view>咨询</view>
						<view>
							<image @click="handelSearch" :src="$buildFullImageUrl('/static/evaluate/search.svg')"></image>
							<image @click="handelMyAtten" :src="$buildFullImageUrl('/static/consult/star-person.svg')"></image>
							<image @click="handelMyConsult" :src="$buildFullImageUrl('/static/consult/record.svg')"></image>
						</view>
					</view>
				</view>
				<view class="search-con">
					<view>
						<view class="bo" v-for="(item, index) in searchList" :key="index">
							<uni-collapse @change="handleSel(item)">
								<uni-collapse-item :open="item.open" :title="item.name"></uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
				</view>
			</view>
			<template #empty>
				<emptyView />
			</template>
			<view class="wrap">
				<view v-for="(x, y) in dotList" :key="y">
					<view class="con-left">
						<image :src="$fullImageUrl(x.avatarUrl)"></image>
						<view v-if="x.appointmentStatus == 1">最近3天内可约</view>
						<view v-if="x.appointmentStatus == 2">最近5天内可约</view>
						<view v-if="x.appointmentStatus == 3">最近7天内可约</view>
						<view v-if="!x.appointmentStatus">暂无可约</view>
					</view>
					<view class="con-right">
						<view class="con-right-top">
							<view>
								<view>{{ x.expertName }}</view>
								<view>
									<text>¥</text>
									<text>{{ x.individualConsultCost }}</text>
									<text>起</text>
								</view>
							</view>
							<view>
								<image :src="$buildFullImageUrl('/static/consult/address.svg')"></image>
								<text>{{ x.cityCopy }}</text>
							</view>
						</view>
						<view @click.stop="handelAppoint(x)" class="con-right-mid">
							<view>{{ x.title }}</view>
							<view>预约</view>
						</view>
						<view class="con-right-bot">
							<view>时长：{{ x.totalConsultHours }}+</view>
							<view>从业{{ x.workingYears }}年</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<uni-popup type="dialog" ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="head">
					<image class="bg" :src="$buildFullImageUrl('/static/consult/head-bg.png')"></image>
					<view class="con">
						<view>咨询</view>
						<view>
							<image @click="handelSearch" :src="$buildFullImageUrl('/static/evaluate/search.svg')"></image>
							<image @click="handelMyAtten" :src="$buildFullImageUrl('/static/consult/star-person.svg')"></image>
							<image @click="handelMyConsult" :src="$buildFullImageUrl('/static/consult/record.svg')"></image>
						</view>
					</view>
				</view>
				<view class="search-con">
					<view>
						<view class="bo" v-for="(item, index) in searchList" :key="index">
							<uni-collapse @change="handleSel(item)">
								<uni-collapse-item :open="item.open" :title="item.name"></uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
				</view>
				<view class="con-container">
					<select-adress-vue @confirmSel="confirmSel" :selectTab="selectTab" v-if="selectTab"></select-adress-vue>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getExpertList } from '@/api/consult/index.js';
import { getLastPartAfterLastComma } from '@/utils/common.js';
import config from '@/config';
import selectAdressVue from '@/components/selectAddress/selectAdress.vue';
export default {
	data() {
		return {
			value: ['0'],
			dotList: [],
			queryParams: {},
			searchList: [
				{
					name: '城市',
					open: false
				},
				// {
				// 	name:'咨询方式',
				// 	open:false
				// },
				{
					name: '擅长对象',
					open: false
				},
				{
					name: '最近可约',
					open: false
				},
				{
					name: '更多',
					open: false
				}
			],
			selectTab: ''
		};
	},
	components: {
		selectAdressVue
	},
	onShareAppMessage() {
	  return {
	    title: '百灵心理',
	    // ...其他配置
	  };
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		getInit() {
			// getExpertList().then(res=>{
			// })
		},
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize,
				...this.queryParams
			};
			getExpertList(querys).then((res) => {
				let list = [...res.rows];
				// console.log(list);
				list.map((i) => {
					i.cityCopy = getLastPartAfterLastComma(i.city);
				});
				// console.log(list);
				this.$refs.paging.completeByTotal(list, res.total);
				// this.$refs.paging.complete(list);
			});
		},
		handelAppoint(e) {
			this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
		},
		handelSearch() {
			this.$tab.navigateTo(`/subset/pages/consult/search/index`);
		},
		handelMyAtten() {
			this.$tab.navigateTo(`/subset/pages/consult/search/myAttent`);
		},
		handelMyConsult() {
			this.$tab.navigateTo(`/subset/pages/consult/search/myConsult`);
		},
		handleSel(e) {
			this.selectTab = e.name;
			this.$refs.popup.open('top');
			// console.log(e);
			const result = this.updateStatus(this.searchList, (item) => item.name === e.name, true);
			// console.log(result);
			this.searchList = result;
		},
		confirmSel(e) {
			this.$refs.popup.close();
			this.selectTab = '';
			if (e.reset) {
				//重置
				this.queryParams = {};
			} else {
				const crowCodeArr = e.adeptList;
				const crowCodeStr = crowCodeArr.join(',');
				this.queryParams = {
					gender: e.sexId ? e.sexId : '',
					cityCode: e.area ? `${e.province},${e.city},${e.area}` : '',
					appointmentStatus: e.appointId ? e.appointId : '',
					crowdCode: crowCodeStr ? crowCodeStr : ''
				};
			}
			// console.log(e);

			this.$refs.paging.reload();
		},
		updateStatus(arr, condition, newStatus) {
			return arr.map((item) => {
				return condition(item) ? { ...item, open: newStatus } : { ...item, open: !newStatus };
			});
		}
	}
};
</script>

<style scoped lang="scss">
.consult {
	width: 100%;
	// height: 100%;
	background-color: #f5f4f8;

	.head {
		width: 100%;
		height: 88rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.con {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 24rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			> view:nth-child(1) {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			> view:nth-child(2) {
				image:nth-child(1) {
					width: 37rpx;
					height: 40rpx;
				}

				image:nth-child(2) {
					width: 42rpx;
					height: 40rpx;
					margin: 0 58rpx 0;
				}

				image:nth-child(3) {
					width: 38rpx;
					height: 41rpx;
				}
			}
		}
	}

	.search-con {
		width: 100%;
		height: 80rpx;
		background-color: #f5f4f8;
		> view:first-child {
			padding: 22rpx 60rpx 22rpx 44rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;

			.bo {
				// width: 25%;
				::v-deep .uni-collapse-item {
					height: 40rpx !important;
				}

				::v-deep .uni-collapse-item__title {
					height: 40rpx !important;
					background-color: #f5f4f8;
					border: none;
				}

				::v-deep .uni-collapse-item__title-wrap {
					height: 40rpx !important;
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__title-box {
					height: 40rpx !important;
					padding: 0;
					line-height: 40rpx;
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__title-text {
					height: 40rpx !important;
					padding: 0;
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__title-arrow {
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__wrap {
					display: none;
				}
			}
		}
	}

	.wrap {
		width: 100%;
		// height: 100%;
		padding: 4rpx 30rpx 0 32rpx;
		box-sizing: border-box;

		> view {
			width: 100%;
			height: 216rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			padding: 14rpx 30rpx 14rpx 12rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.con-left {
				width: 162rpx;
				height: 188rpx;
				border-radius: 20rpx;
				position: relative;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
				}

				> view {
					width: 100%;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					font-weight: 600;
					font-size: 24rpx;
					color: #ffffff;
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.3);
				}
			}

			.con-right {
				width: calc(100% - 186rpx);
				height: 100%;
				padding-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				&-top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					> view:first-child {
						display: flex;
						align-items: center;

						> view:nth-child(1) {
							font-family: PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
							margin-right: 20rpx;
						}

						> view:nth-child(2) {
							display: flex;
							align-items: center;

							> text:nth-child(1) {
								font-weight: 400;
								font-size: 20rpx;
								color: #5c83fd;
							}

							> text:nth-child(2) {
								font-weight: 600;
								font-size: 28rpx;
								color: #5c83fd;
								margin: 0 10rpx 4rpx;
							}

							> text:nth-child(3) {
								font-weight: 400;
								font-size: 20rpx;
								color: #5c83fd;
							}
						}
					}

					> view:last-child {
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 25rpx;
							margin-right: 4rpx;
						}

						text {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							padding-right: 14;
						}
					}
				}

				&-mid {
					width: 100%;
					display: flex;
					justify-content: space-between;
					// margin-top: 12rpx;

					> view:nth-child(1) {
						width: calc(100% - 114rpx);
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						display: -webkit-box; /* 必须结合 */
						-webkit-line-clamp: 2; /* 显示行数 */
						-webkit-box-orient: vertical; /* 方向垂直 */
						overflow: hidden; /* 隐藏溢出 */
						text-overflow: ellipsis; /* 兼容单行省略号 */
					}

					> view:nth-child(2) {
						width: 104rpx;
						height: 44rpx;
						line-height: 44rpx;
						background: linear-gradient(117deg, #e2b1e8 0%, #77b8fa 47%, #597ff7 100%);
						box-shadow: 0rpx 0rpx 6rpx rgba(126, 191, 254, 0.1);
						border-radius: 22rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						text-align: center;
					}
				}

				&-bot {
					width: 100%;
					display: flex;
					// margin-top: 18rpx;

					> view {
						padding: 2rpx 8rpx;
						background: rgba(253, 193, 78, 0.1);
						border-radius: 18rpx;
						border: 1px solid #fdba41;
						font-weight: 400;
						font-size: 20rpx;
						color: #ff9300;
					}

					> view:nth-child(2) {
						margin-left: 14rpx;
					}
				}
			}
		}
	}

	.box-con {
		width: 100%;

		// height: calc(100% - 168rpx);

		// >view:last-child{
		// 	width: 100%;
		// 	height:calc(100% - 88rpx - 88rpx);

		// }
	}
	.popup-content {
		width: 100%;
		height: 800rpx;
		background-color: #fff !important;
		.search-con {
			width: 100%;
			height: 80rpx;
			> view:first-child {
				padding: 22rpx 60rpx 22rpx 44rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: space-between;
				// border-bottom: 1rpx solid #d8d8d8;
				border-bottom: 1rpx solid #eee;
				background-color: #fff !important;
				.bo {
					// width: 25%;
					::v-deep .uni-collapse-item {
						height: 40rpx !important;
					}

					::v-deep .uni-collapse-item__title {
						height: 40rpx !important;
						background-color: #fff !important;
						border: none;
					}

					::v-deep .uni-collapse-item__title-wrap {
						height: 40rpx !important;
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__title-box {
						height: 40rpx !important;
						padding: 0;
						line-height: 40rpx;
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__title-text {
						height: 40rpx !important;
						padding: 0;
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__title-arrow {
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__wrap {
						display: none;
					}
				}
			}
		}

		.con-container {
			width: 100%;
			height: calc(100% - 168rpx);
			// border-top: 1rpx solid #d8d8d8;
		}
	}
}
</style>
